import React, { Component, PropTypes } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';
import PxToDp from '../../utils/PxToDp';

class ChannelItem extends Component {
  static propTypes = {
    saleData: PropTypes.object,
  };
  render() {
    const saleData = this.props.saleData;
    let username = '';
    let sex = '男';
    let address = '';
    let loginAt = '';
    let phone = '';
    let age = '';
    let lookcar = '';
    let bookdrive = '';
    if (saleData) {
      username = saleData.username;
      if (saleData.sex === 1) {
        sex = '男';
      } else {
        sex = '女';
      }
      address = saleData.address;
      loginAt = saleData.login_at;
      phone = saleData.phone;
      age = saleData.age;
      lookcar = saleData.lookcar;
      bookdrive = saleData.bookdrive;
    }

    return (
      <TouchableOpacity>
        <View style={style.wrapper}>
          <View style={[style.contentTop, style.row]}>
            <View style={style.contentLeft}>
              <View style={style.avator} />
            </View>
            <View style={style.contentMid}>
              <View style={style.row}>
                <Text style={style.name}>{ username }</Text>
                <Text style={[style.sexText, style.red, style.textFontFamily]}>{ sex }</Text>
                <Text style={[style.sexText, style.blue, style.textFontFamily]}>{address}</Text>
              </View>
              <View style={[style.row, style.contentTime]}>
                <Text style={[style.loginAt, style.textFontFamily]}>最近登录: {loginAt}</Text>
              </View>
            </View>
            <View style={style.contentRight}>
              <Image style={style.colect} source={require('../../img/home/hStarFocus.png')} />
            </View>
          </View>

          <View style={[style.buyInfo, style.row]}>
            <Text style={[style.buyInfoBg, style.textFontFamily]}>{phone}</Text>
            <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>{age}岁</Text>
            <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>无车</Text>
            <Text style={[style.buyInfoBg, style.buyInfoLeft, style.textFontFamily]}>全款</Text>
          </View>
          <View style={[style.row, style.carView]}>
            <Text style={[style.textFontFamily, style.carText]}>关注3个车系：</Text>
            <Text style={[style.textFontFamily, style.carText]}>{lookcar}</Text>
          </View>
          <View style={[style.row, style.carView]}>
            <Text style={[style.textFontFamily, style.carText, style.flex]}>购买意向：90%</Text>
            <Text style={[style.textFontFamily, style.carText, style.flex]}>预约试驾：{bookdrive}</Text>
          </View>
          <View style={[style.bottom, style.row]}>
            <Text style={[style.source, style.textFontFamily]}>谁谁的客户</Text>
          </View>
        </View>
      </TouchableOpacity>

    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    backgroundColor: '#fff',
    marginTop: PxToDp(10),
  },
  row: {
    flexDirection: 'row',
  },
  contentTop: {
    height: PxToDp(63),
    paddingTop: PxToDp(18),
  },
  contentLeft: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  avator: {
    width: PxToDp(38),
    height: PxToDp(38),
    borderRadius: PxToDp(18),
    backgroundColor: 'purple',
  },
  contentMid: {
    flex: 3,
  },
  contentRight: {
    flex: 1,
    alignItems: 'flex-end',
    paddingRight: PxToDp(10),
  },
  name: {
    fontSize: PxToDp(20),
    color: '#333333',
  },
  contentTime: {
    marginTop: PxToDp(2),
  },
  loginAt: {
    fontSize: PxToDp(12),
    color: '#999999',
  },
  flex: {
    flex: 1,
  },
  textFontFamily: {
    fontFamily: 'PingFangSC-Regular',
  },
  sexText: {
    fontSize: PxToDp(11),
    color: '#FFFFFF',
    borderRadius: PxToDp(1),
    paddingTop: PxToDp(1),
    paddingLeft: PxToDp(6),
    paddingRight: PxToDp(6),
  },
  red: {
    backgroundColor: '#F89A99',
    marginLeft: PxToDp(24),
    width: PxToDp(24),
    marginTop: PxToDp(4),
  },
  blue: {
    backgroundColor: '#63C3F1',
    marginLeft: PxToDp(8),
    marginTop: PxToDp(4),
  },
  colect: {
    height: PxToDp(24),
    width: PxToDp(24),
  },
  buyInfo: {
    paddingLeft: PxToDp(11),
    paddingTop: PxToDp(18),
  },
  buyInfoBg: {
    backgroundColor: '#F8F8F8',
    borderRadius: PxToDp(1),
    paddingTop: PxToDp(5),
    paddingBottom: PxToDp(5),
    paddingLeft: PxToDp(7),
    paddingRight: PxToDp(7),
    fontSize: PxToDp(16),
    color: '#333333',
  },
  buyInfoLeft: {
    marginLeft: PxToDp(8),
  },
  carView: {
    paddingTop: PxToDp(5),
    paddingLeft: PxToDp(11),
  },
  carText: {
    fontSize: PxToDp(14),
    color: '#999999',
  },
  bottom: {
    height: PxToDp(61),
    backgroundColor: '#FFFFFF',
    marginTop: PxToDp(16),
    borderTopWidth: PxToDp(1),
    borderStyle: 'solid',
    borderColor: '#F3F4F6',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingRight: PxToDp(10),
  },
  source: {
    fontSize: PxToDp(16),
    color: '#333333',
  },
});
export default ChannelItem;
